<template>
    <!--商品查询-->
    <el-form :inline="true" :model="formdata" class="demo-form-inline">
        <el-form-item label="商品名称">
            <el-input v-model="formdata.pname" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="商品编号">
            <el-input v-model="formdata.id" placeholder="请输入商品编号" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!--商品列表数据-->
    <el-table :data="productData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="90" />
        <el-table-column prop="pname" label="商品名称" width="120" />
        <el-table-column prop="imgurl" label="商品图片" width="120">
            <template #default="scope">
                <img :src="scope.row.imgurl" alt="" height="70">
            </template>
        </el-table-column>
        <el-table-column prop="oldprice" label="商品原价" width="90" />
        <el-table-column prop="newprice" label="商品折扣价" width="100" />
        <el-table-column prop="color" label="商品颜色" width="120" />
        <el-table-column prop="szie" label="尺寸" width="120" />
        <el-table-column prop="count" label="销售数量" width="100" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default>
                <el-button type="danger" size="small" @click="handleClick">
                    下线
                </el-button>
                <el-button type="primary" size="small">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

</template>
<script setup>
import axios from 'axios'
import { reactive } from 'vue'
import { onMounted, ref } from 'vue'

const productData = ref([])
const formdata = reactive({
    pname: '',
    id:''
})

onMounted(() => { 
    //在页面响应的时候 直接渲染数据
    callproductApi()
})

//获取后台的数据接口 函数封装起来 便于调用
const callproductApi = () => { 
    axios.get("http://localhost:8080/api/product").then(res => { 
        console.log(res.data);
        productData.value=res.data
    })
}
const handleClick = () => {
    console.log('click')
}
// 查询的函数
const onSubmit = () => {
    console.log('submit!')
}

</script>
<style scoped>

</style>